<template>
  <tm-sheet color="#f5f6fa" margin="0" :class="class">
    <tm-row class="flex-row-center-start">
      <tm-image
        v-if="data && data.url"
        :round="100"
        :width="80"
        :height="80"
        :src="data.url"
      ></tm-image>
      <tm-sheet
        padding="0"
        :margin="[20, 0]"
        color="transparent"
        class="flex-1"
      >
        <tm-text>{{
          !data || Object.keys(data).length === 0 ? placeholder : data.name
        }}</tm-text>
      </tm-sheet>
      <tm-icon class="text-size-xxs" name="arrow-down-s-line"></tm-icon>
    </tm-row>
  </tm-sheet>
</template>

<script lang="ts" setup>
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
  placeholder: {
    type: String,
    default: "Please Select",
  },
  class: {
    type: String,
    default: "",
  },
})
</script>

<style lang="scc"></style>
